<template>
	<view>
		<u-waterfall v-model="recommendList" ref="uWaterfal1">
			<template v-slot:left="{ leftList }">
				<view class="warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450"  imgMode="widthFix"  :image="item.picture.split(';')[0]" :index="index" @click="navtoTravelDetails(item.post_id)"></u-lazy-load>
					<view class="water_instoduction textHd2">{{ item.post_content | emojoy}}</view>
					<view class="water_details flex flexBei">
						<view class="water_userinfo textHd">
							<image :src="item.hesd_portrait" mode="aspectFill"></image>
							<text>{{ item.user_name }}</text>
						</view>
						<view class="water_spot">
							<view class="iconfont icon-zanpress inview"></view>
							<text>{{item.likes>999? '999+': item.likes}}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="warter" v-for="(item, index) in rightList" :key="index" @click="navtoTravelDetails(item.post_id)">
					<u-lazy-load threshold="-450"  imgMode="widthFix" :image="item.picture.split(';')[0]" :index="index"></u-lazy-load>
					<view class="water_instoduction textHd2">{{ item.post_content | emojoy}}</view>
					<view class="water_details flex flexBei">
						<view class="water_userinfo textHd">
							<image :src="item.hesd_portrait" mode="aspectFill"></image>
							<text>{{ item.name }}</text>
						</view>
						<view class="water_spot">
							<view class="iconfont icon-zanpress inview"></view>
							<text>{{item.likes>999? '999+': item.likes}}</text>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	export default {
		props: {
		  recommendList: {
			  type: Array,
		  }	
		},
		data() {
			return {
				
			};
		},
		methods: {
			navtoTravelDetails (id) {
				uni.navigateTo({
					url: `../travel_details/travel_details?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warter {
	    width: 350rpx;
		background-color: #fff;
		box-shadow: 8rpx 8rpx 8rpx #e6e6e6;
		padding: 22rpx;
		margin-top: $margin_top;
		margin-left: 12rpx;
		border-radius: 18rpx;
		&:first-child {
			margin-top: 4rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
		.water_instoduction {
			padding-top: 12rpx;
			font-size: 26rpx;
			text-indent: 2em;
		}
		.water_details {
			font-size: 24rpx;
			line-height: 40rpx;
			padding-top: 18rpx;
			.water_userinfo {
				width: 200rpx;
				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					vertical-align: text-bottom;
				}
				text {
					padding-left: 6rpx;
					font-size: 28rpx;
					
				}
			}
			.water_spot {
				padding-top: 18rpx;
				.iconfont {
					font-size: 24rpx;
					padding-right: 12rpx;
				}
			}
		}
	}
	
</style>
